/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.heroBanner {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6rem 2rem;
  background-color: #92c5e7;
  background: color(display-p3 0.5707 0.772 0.9073);
}

[data-theme='dark'] .heroBanner {
  background: #171e31;
}

.heroLogo {
  max-width: 25rem;
  width: 100%;
}

.heroButton {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.3rem;
  padding: 10px 45px;
  border-radius: 8px;
  color: white;
  border: 2px solid #212a41;
  background: #d32e5e;
  background: color(display-p3 0.7608 0.2431 0.3725);
  transition: transform 0.2s ease;
  position: relative;
  transform-style: preserve-3d;
}

[data-theme='dark'] .heroButton {
  color: #e0e0e0;
  border-color: #0000005e;
  background: #ff4c7c;
  background: color(display-p3 0.8431 0.3294 0.4863);
}

.heroButton::before,
.heroButton::after {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #212a41;
  border-radius: 8px;
  transition: transform 0.2s ease;
  transform: translateZ(-1px);
}

[data-theme='dark'] .heroButton::before,
[data-theme='dark'] .heroButton::after {
  border-color: #0000005e;
}

.heroButton::before {
  background-color: #289eec;
}

[data-theme='dark'] .heroButton::before {
  background-color: #1c7ab3;
}

.heroButton::after {
  background-color: #59b3ef;
}

[data-theme='dark'] .heroButton::after {
  background-color: #3399ff;
}

.heroButton:hover {
  transform: translate(-16px, -16px);
  text-decoration: none;
  color: white;
}

[data-theme='dark'] .heroButton:hover {
  color: #e0e0e0;
}

.heroButton:hover::before {
  transform: translate(8px, 8px) translateZ(-1px);
}

.heroButton:hover::after {
  transform: translate(16px, 16px) translateZ(-2px);
}

.heroContentContainer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 1rem;
}

.heroIcon {
  width: 132px;
  height: 132px;
  margin-bottom: 1rem;
}
